<template>
	<div style="display:flex;width:100vw">
		<LayoutLeft @toLink="menuClick" :menuArr="menuArr" />
		<div style="position:relative;flex-grow:1">
			<div id="content" ref="content">
				<router-view root ref="JsRouter" @click.native="scollerTop" />
				<footer class="JsFoot" v-if="$route.name !== 'home'">
					<p>
						<span style="margin-left: 1rem;vertical-align: text-bottom;color:#999">
							<template v-for="(item, key) in links">
								<span :key="key" v-if="item.type === 'divider'" :style="fStyle">|</span>
								<el-link :key="key" v-else target="_blank" :href="item.href">{{ item.title }}</el-link>
							</template>
						</span>
					</p>
					<p>
						<span>微信：JiessCli</span>
						<span :style="fStyle">|</span>
						<span>QQ群：110937844</span>
						<span :style="fStyle">|</span>
						<span>wgzimg@163.com</span>
						<span :style="fStyle">|</span>
						<span>蜀ICP备19017195号-2</span>
					</p>
				</footer>
			</div>
		</div>
	</div>
</template>

<script>
import LayoutLeft from '../LayoutLeft';
export default {
	name: 'LayoutContent',
	components: { LayoutLeft },
	data() {
		return {
			menuArr: [],
			fStyle: {
				margin: '0 10px'
			},
			links: [
				{
					title: '首页',
					href: 'https://www.jiess.net'
				},
				{
					type: 'divider'
				},
				{
					title: 'API',
					href: '/API/start/preface'
				},
				{
					type: 'divider'
				},
				{
					title: '码云',
					href: 'https://gitee.com/wgzimg/JIESS-DEMO'
				}
			]
		};
	},
	created() {
		this.httpBack(this.$jiess.api.leftMenuList()).then(res => (this.menuArr = res.data));
	},
	methods: {
		//跳到顶部
		scollerTop(e) {
			if (e.target.classList.contains('to-head-box')) {
				this.$refs.content.scrollTop = 0;
			}
		},
		menuClick(path) {
			this.$router.push(path);
		}
	}
};
</script>

<style>
#content {
	width: 100%;
	height: 100%;
	padding: 0.8rem;
	position: absolute;
	overflow-x: hidden;
	overflow-y: scroll;
	background-color: #f7f7f7;
}

#content::-webkit-scrollbar {
	display: none;
}

footer.JsFoot {
	color: gray;
	padding: 12px 0;
	text-align: center;
	margin: -56px 0 68px;
	background-color: white;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
